<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>设置</el-breadcrumb-item>
        <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
      </el-breadcrumb>
      <p>店铺信息</p>
    </el-card>

    <!-- 基础信息 -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <p>基础信息</p>
        </el-col>
        <el-col :span="10">
          <el-form ref="storeInfoFrom" :model="storeInfoFrom" label-width="100px">
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item label="商户名称">
              <el-input v-model="storeInfoFrom.name" placeholder="请选择商户名称"></el-input>
            </el-form-item>
            <el-form-item label="商户地址">
              <el-input v-model="storeInfoFrom.address" placeholder="请选择商户地址"></el-input>
            </el-form-item>
            <el-form-item label="所属行业">
              <el-select v-model="storeInfoFrom.industry" placeholder="请选择一级分类">
                <el-option label="计算机信息" value="计算机信息"></el-option>
                <el-option label="建筑工程" value="建筑工程"></el-option>
                <el-option label="电商" value="电商"></el-option>
                <el-option label="餐饮" value="餐饮"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺LOGO">
              <el-upload
                class="avatar-uploader"
                action="http://172.16.12.80:8080/vip/uploadImage"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                name="img"
              >
                <img v-if="storeInfoFrom.logo" :src="storeInfoFrom.logo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="商户简介">
              <el-input
                type="textarea"
                :rows="4"
                v-model="storeInfoFrom.profile"
                placeholder="请选择商户简介"
              ></el-input>
            </el-form-item>
            <el-form-item label="店铺状态">
              <el-switch v-model="isTrue" disabled></el-switch>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
    </el-card>
    <!-- 负责人信息 -->
    <el-card>
      <el-row>
        <el-col :span="6">
          <p>负责人信息</p>
        </el-col>
        <el-col :span="10">
          <el-form ref="storeInfoFrom" :model="storeInfoFrom" label-width="100px">
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="storeInfoFrom.responsibleName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="微信">
              <el-input v-model="storeInfoFrom.weixin" placeholder="请输入微信"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="storeInfoFrom.phone" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="QQ">
              <el-input v-model="storeInfoFrom.qq" placeholder="请输入QQ"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="storeInfoFrom.eamil" placeholder="请输入邮箱"></el-input>
            </el-form-item>
          </el-form>
          <!-- 提交和返回按钮 -->
          <el-button style="margin:10px 0 10px 100px" type="primary" @click="editInfo">提交</el-button>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //基本信息表
      storeInfoFrom: {
        id: "",
        name: "",
        address: "",
        industry: "",
        logo: "",
        phoneService: "",
        profile: "",
        status: "",
        responsibleName: "",
        weixin: "",
        phone: "",
        qq: "",
        eamil: "",
      },
      //logo上传
      imageUrl: "",
    };
  },
  computed: {
    //判断店铺状态
    isTrue() {
      return this.storeInfoFrom.status == "1" ? true : false;
    },
  },
  methods: {
    //logo上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code != 0) return this.$message.error("图片上传失败!");
      this.storeInfoFrom.logo = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    //查询店铺信息
    async getInfo() {
      this.storeInfoFrom.id = window.sessionStorage.getItem("manage");
      console.log(this.storeInfoFrom.id);
      const { data: res } = await this.$axios.get("/vip/shop/phone", {
        params: {
          id: this.storeInfoFrom.id,
        },
      });
      if (res.code != 0) return this.$message.error("获取店铺信息失败!");
      this.storeInfoFrom = res.data;
    },
    //店铺修改
    async editInfo() {
      const { data: res } = await this.$axios.post(
        "/vip/shop/update",
        this.storeInfoFrom
      );
      if (res.code != 0) return this.$message.error("店铺信息修改失败!");
      this.$message.success("店铺信息修改成功!");
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 177.5px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>